<template>
    <view class="topbar" :class="{ onlyBox }">
        <view class="fullTelMask" :class="{ show: isShow }"></view>
        <view class="home-user" :class="{ show: isShow }">
            <view class="hold-img-box">
                <view class="tit">
                    <text>微信电话授权登录</text>
                </view>
                <view class="closeBox" @click.stop="close" v-if="!onlyBox">
                    <uni-icons type="closeempty" size="22"></uni-icons>
                </view>

                <view class="content">
                    <slot>

                        <view class="words">
                            尊敬的用户，为了向您提供更优质的服务，需要您通过点击“授权”按钮进行微信电话授权，为您建立属于您的账户体系，来确保您在程序内的一切功能可正常使用。
                        </view>

                        <view class="h1 authBox">
                            <button class="openBtn transBg" open-type="getPhoneNumber|agreePrivacyAuthorization" style="width: 100%; height: 80rpx; line-height: 80rpx; font-size: 30rpx; color: #fff" @getphonenumber="getPhoneNumber">微信电话授权</button>
                        </view>
                    </slot>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
    const defaultAvatarUrl = 'http://192.168.8.10:8700/sex_imgs/app/head_man.png';
    const app = getApp();
    export default {
        props: ['isShow', 'needBefore', 'onlyBox'],
        components: {},
        data() {
            return {
                avatarUrl: defaultAvatarUrl,
                //是否认证了 0否  1是
                ifCertified: 0,
                nickName: undefined,
                phone: ''
            };
        },
        watch: {
            isShow: {
                immediate: true,
                handler(current) {
                    if (current && !this.onlyBox) {
                        uni.hideTabBar();
                    } else {
                        setTimeout(() => {
                            uni.showTabBar();
                        }, 300);
                    }
                }
            }
        },
        onShow() {},
        mounted() {},
        methods: {
            fininsh() {
                this.$emit('finish');

                this.close();
            },
            close() {
                this.$emit('update:isShow', false);
            },
            getPhoneNumber(e) {
                let telCode = e.detail.code;

                // console.log('授课计划是的咖啡店啊科技时代和',e)

                //如果有 telCode
                if (telCode) {
                    this.$axios('flash/smallapplet/getPhone?code=' + telCode).then(res => {
                        if (res.code == 200 && res.data.errcode == 0) {
                            let telNumber = res.data.phone_info.phoneNumber;

                            this.phone = telNumber;

                            this.goSubmit();
                        } else {
                            uni.showToast({
                                title: '获取失败，请稍后再试',
                                icon: 'none'
                            });
                        }
                    });
                } else {
                }
            },

            //提交
            goSubmit() {
                let userObj = {
                    userPhone: this.phone,
                    nickname: '尾号' + (this.phone + '').substr(-4),
                    headimgurl: defaultAvatarUrl,
                    accountType: 1,
                    openId: app.globalData.wxCodeInfo.openId,
                    unionId: app.globalData.wxCodeInfo.unionId,
                    // app:app.Appid()
                    app: 'xcx'
                };

                this.getUserInfo(userObj);
            },
            getUserInfo(userObj) {
                //判断有没有推荐人
                //    let recommeId =   app.globalData.recommeId

                //     if( recommeId ){

                //         userObj.referrerUserId = recommeId
                //     }

                // console.log('哈哈哈哈',userObj)

                // return 

                this.$axios({
                    url: 'flash/smallapplet/binding?loading',
                    data: userObj
                }).then(res => {
                    console.log('获取绑定后信息', res);

                    app.getCurrentUser(res.data);

                    this.fininsh();
                });
            },
            fall: res => {
                console.log('失败', res);
            }
        }
    };
</script>

<style scoped lang="scss">
    .fullTelMask {
        /* background:#ffffff; */
        position: fixed;
        z-index: 112;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.6);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        display: none;
    }
    .fullTelMask.show {
        display: block;
    }
    .onlyBox {
        .fullTelMask {
            display: none !important;
        }
    }
    .home-user {
        position: fixed;
        /* height: 360rpx; */
        background-color: #fff;
        z-index: 113;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 14rpx;
        display: none;
        width: 80%;
        max-width: 600rpx;
    }
    .home-user.show {
        display: block;
    }

    .hold-img-box {
        width: 100%;
        position: relative;
        text-align: center;
        border-radius: 6px;
        overflow: hidden;
        // margin: 30rpx 0 0rpx;
        box-sizing: border-box;
        padding: 0;
    }

    .hold-img-box .tit {
        color: #000;
        font-weight: bold;
        text-align: center;
        /* margin-top: 20rpx; */
        font-size: 32rpx;
        padding: 40rpx 50rpx 20rpx;
    }
    .hold-img-box .content {
        padding: 20rpx 40rpx 
    }

    .hold-img-box .h1 {
        color: #777777;
        text-align: center;
        font-size: 28rpx;
    }
    .closeBox {
        position: absolute;
        right: 22rpx;
        top: 22rpx;
        color: #333;
    }
    .btnBox {
        position: relative;
        margin-top: 20px;
        display: flex;
        border-top: 1rpx solid #eaeaea;
        /* background-color: #f1f1f1; */
    }
    .btnBox::after {
        position: absolute;
        left: 50%;
        content: ' ';
        width: 1px;
        height: 100%;
        background-color: #eaeaea;
    }
    .btnBox .openBtn {
        flex: 1;
    }
    //去掉 原生button 自带的边框
    .btnBox button::after {
        border: none;
    }
    .words{
        color: #565656;
        font-size: 26rpx;
        line-height: 1.8;
         padding: 10rpx 0 20px;
         text-align: left;
         text-indent: 2em;
    }
    .authBox {
        padding: 20rpx 0 40rpx;
    }
    .openBtn {
        padding: 0;
        height: 60rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 26rpx;
        margin: 0 auto;
        border-radius: 60rpx;
        color: #000;
        &::after {
            display: none;
        }
    }
</style>
